<template>
  <Modal :width="600" v-model="model" @on-cancel='onCancel'>
    <p slot="header" >
      <Icon type="ios-information-circle"></Icon>
      <span>新增节点</span>
    </p>
    <div class="ht400 scroll">
      <Form :model="form" :label-width="100" ref="ruleForm" :rules="rules">
        <FormItem label="部门名称:" prop="name">
          <Input v-model="form.name" placeholder="请输入节点名称"/>
        </FormItem>
        <FormItem label="科室:">
          <Select v-model="form.parentId">
              <Option v-for="item in list" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button  size="large" type="text"  @click="onCancel">取消</Button>
      <Button type="primary" size="large"   @click="onDone">确认</Button>
    </div>
  </Modal>
</template>
<script>

export default {
  components: {
  },
  props: {
  },
  created () {
  },
  data() {
    return {
      id: '',
      model: false,
      form: { parentId: '0', name: '' },
      rules: {
        name: [{ message: '请输入节点名称', trigger: 'blur', required: true }]
      },
      loading: false,
      height: '',
      list: []
    }
  },
  methods: {
    open() {
      this.model = true
      this.form.parentId = '0'
      this.form.name = ''
      this.getData()
    },
    onCancel() {
      this.close()
      this.$emit('cancel', {}, {}, this.form)
    },
    onDone() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // 在外部接口成功在自行调close函数，关闭弹窗
          this.$emit('confirm', {}, {}, this.form)
        }
      })
    },
    close() {
      this.model = false
    },
    getData () {
      this.$jsonPost('/department/listDepartmentTree').then(res => {
          const loop = (res) => {
            res.forEach(item => {
                item.expand = false
                item.label = item.name
                if (item.children) {
                  delete item.children
                }
            })
          }
          loop(res)
          this.list = res
      })
    },
    onTreeSelect() {}
  }
}
</script>

